<template>
    <div class="box box10" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
        <!-- <ImmersiveNavbar title="眨眨眼" /> -->
        <img @click="goToBox11" class="image" :src="bgImg" alt="">
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import bgImg from '@/assets/img/11.jpg'

// import ImmersiveNavbar from '@/components/ImmersiveNavbar.vue'
const router = useRouter()
function goToBox11() { router.push('/box11') }
</script>

<script>
/* global plus */
export default {
    name: 'BoxTen',
    created() {
        setTimeout(() => {
            this.$router.push('/box11')
        }, 1500);
    },
    mounted() {
        document.addEventListener('plusready', this.handleBackButton);
        // 设置沉浸式状态栏：深色文字、浅色背景
        this.setStatusBarDark()
        document.addEventListener('plusready', this.handlePlusReady)
    },
    methods: {
        handlePlusReady() {
            this.setStatusBarDark()
        },
        setStatusBarDark() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('dark')
                    plus.navigator.setStatusBarBackground('#ffffff')
                } catch (e) { console.warn('Box10 setStatusBarDark failed', e) }
            }
        },
        restoreStatusBarDefault() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('light')
                    plus.navigator.setStatusBarBackground('#00000000')
                } catch (e) { console.warn('Box10 restoreStatusBarDefault failed', e) }
            }
        },
        handleBackButton() {
            if (typeof plus !== 'undefined' && plus.key) {
                plus.key.addEventListener('backbutton', () => {
                    if (this.$route.path !== '/box1') {
                        this.$router.push('/box9');
                    } else {
                        if (confirm('再按一次退出应用')) {
                            plus.runtime.quit();
                        }
                    }
                });
            }
        },
        handleTouchStart(e) {
            this.startX = e.touches[0].clientX
            this.startY = e.touches[0].clientY
        },
        handleTouchEnd(e) {
            const endX = e.changedTouches[0].clientX
            const endY = e.changedTouches[0].clientY
            const deltaX = endX - this.startX
            const deltaY = endY - this.startY
            if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
                if (deltaX > 0) {
                    this.goPrev()
                } else {
                    this.goNext()
                }
            }
        },
        goPrev() {
            this.$router.push('/box9')
        },
        goNext() {
            this.$router.push('/box11')
        },
    },
    beforeUnmount() {
        document.removeEventListener('plusready', this.handleBackButton);
        document.removeEventListener('plusready', this.handlePlusReady);
        this.restoreStatusBarDefault()
    }
}
</script>

<style scoped>
.box {
    width: 375px;
    height: 100vh;
    position: absolute;
    overflow: auto;
    background: #fff;
    padding-top: 44px;
}

.image {
    width: 375px;
    transform: translateY(-50px);
}
</style>